/**
 * 管理页面工具表单组件 - 全屏版本
 */

import React, { useState, useRef, useEffect } from 'react';
import { Upload, Star, Trash2, X, Loader2 } from 'lucide-react';
import { preprocessFormData } from '@/utils/dataValidator';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import toast from 'react-hot-toast';
import { toolsApi } from '@/services/toolsApi';
import type { Tool } from '@/types';
import { cn } from '@/lib/utils';

interface AdminToolFormProps {
  tool?: Tool;
  onSave: (tool: Partial<Tool>) => void;
  onClose: () => void;
  saving?: boolean;
}

export function AdminToolForm({ tool, onSave, onClose, saving = false }: AdminToolFormProps) {
  const [formData, setFormData] = useState({
    id: tool?.id || '',
    name: tool?.name || '',
    description: tool?.description || '',
    content: tool?.content || '',
    icon_url: tool?.icon_url || '',
    icon_theme: tool?.icon_theme || 'auto',
    categories: tool?.category ? (Array.isArray(tool.category) ? tool.category : [tool.category]) : [] as string[],
    url: tool?.url || '',
    featured: tool?.featured || false,
    status: tool?.status || 'active',
    sort_order: tool?.sort_order || 0,
    tags: tool?.tags || [] as string[],
    needs_vpn: tool?.needs_vpn || false,
  });

  const [newTag, setNewTag] = useState('');
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const categories = ['AI', '效率', '设计', '开发', '其他'];

  // 锁定背景滚动
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, []);

  const handleInputChange = (field: string, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };


  const handleCategoryToggle = (category: string) => {
    setFormData(prev => ({
      ...prev,
      categories: prev.categories.includes(category)
        ? prev.categories.filter(c => c !== category)
        : [...prev.categories, category]
    }));
  };

  const handleAddTag = () => {
    const trimmedTag = newTag.trim();
    if (trimmedTag && !formData.tags.includes(trimmedTag)) {
      setFormData(prev => ({
        ...prev,
        tags: [...prev.tags, trimmedTag]
      }));
      setNewTag('');
    }
  };

  const handleRemoveTag = (indexToRemove: number) => {
    setFormData(prev => ({
      ...prev,
      tags: prev.tags.filter((_, index) => index !== indexToRemove)
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      const processedResult = preprocessFormData({
        ...formData,
        category: formData.categories
      });

      // 检查验证结果
      if (!processedResult.validation.isValid) {
        toast.error(`数据验证失败: ${processedResult.validation.errors.join(', ')}`);
        return;
      }

      onSave(processedResult.data);
    } catch (error) {
      console.error('提交失败:', error);
      toast.error(error instanceof Error ? error.message : '提交失败');
    }
  };

  return (
    <div className="fixed inset-0 z-50 bg-background flex flex-col">
      {/* 顶部标题栏 */}
      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="h-safe-top bg-background/95"></div>
        <div className="flex items-center justify-between p-4">
        <div className="flex items-center gap-2 min-w-0 flex-1">
          <div className="min-w-0 flex-1">
            <h1 className="text-lg font-semibold hidden md:block">
              {tool ? '编辑工具' : '添加工具'}
            </h1>
            <h1 className="text-lg font-semibold md:hidden truncate">
              {tool ? tool.name : '添加工具'}
            </h1>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onClose}
            disabled={saving || uploading}
          >
            <X className="w-4 h-4 mr-2" />
            取消
          </Button>
          <Button
            type="submit"
            size="sm"
            disabled={saving || uploading}
            className="min-w-[100px]"
            form="tool-form"
          >
            {(saving || uploading) && (
              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
            )}
            {saving ? '提交中...' : uploading ? '上传中...' : tool ? '保存修改' : '添加工具'}
          </Button>
        </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="flex-1 overflow-y-auto">
        <form id="tool-form" onSubmit={handleSubmit} className="px-4 pb-4 pt-6 md:px-6 md:pb-6 md:pt-8 space-y-6 max-w-4xl mx-auto">
          {/* 基本信息 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>工具名称 *</Label>
              <Input
                value={formData.name}
                onChange={(e) => handleInputChange('name', e.target.value)}
                placeholder="请输入工具名称"
                required
              />
            </div>

            <div className="space-y-2">
              <Label>工具ID *</Label>
              <Input
                value={formData.id}
                placeholder="系统自动生成的工具ID"
                required
                readOnly={true}
                className="bg-muted cursor-not-allowed"
              />
              <p className="text-xs text-muted-foreground">
                工具ID由系统自动生成，无需手动填写
              </p>
            </div>

            <div className="space-y-2 lg:col-span-2">
              <Label>工具链接 *</Label>
              <Input
                value={formData.url}
                onChange={(e) => handleInputChange('url', e.target.value)}
                placeholder="https://example.com"
                type="url"
                required
              />
            </div>

            <div className="space-y-2 lg:col-span-2">
              <Label>简短描述 *</Label>
              <Textarea
                value={formData.description}
                onChange={(e) => handleInputChange('description', e.target.value)}
                placeholder="请输入工具的简短描述"
                rows={3}
                required
              />
            </div>
          </div>

          {/* 图标设置 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium">图标设置</h3>
            
            <div className="space-y-4">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="icon_url">工具图标URL</Label>
                  <Input
                    id="icon_url"
                    placeholder="https://example.com/icon.png"
                    value={formData.icon_url}
                    onChange={(e) => handleInputChange('icon_url', e.target.value)}
                  />
                  <p className="text-xs text-muted-foreground">
                    推荐使用PNG格式，尺寸64x64像素
                  </p>
                </div>

                <div className="space-y-2">
                  <Label>图标主题</Label>
                  <Select
                    value={formData.icon_theme}
                    onValueChange={(value) => handleInputChange('icon_theme', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="选择图标主题" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="auto">自动适配</SelectItem>
                      <SelectItem value="auto-light">自动适配（偏亮色）</SelectItem>
                      <SelectItem value="auto-dark">自动适配（偏暗色）</SelectItem>
                      <SelectItem value="light">浅色主题</SelectItem>
                      <SelectItem value="dark">深色主题</SelectItem>
                      <SelectItem value="none">无处理</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground">
                    控制图标在不同主题下的显示效果
                  </p>
                </div>

                {/* 图标预览 */}
                {formData.icon_url && (
                  <div className="space-y-2">
                    <Label>图标预览</Label>
                    <div className="flex items-center gap-4 p-4 border rounded-lg">
                      <img
                        src={formData.icon_url}
                        alt="图标预览"
                        className="w-12 h-12 object-contain rounded border"
                        onError={(e) => {
                          e.currentTarget.style.display = 'none';
                        }}
                      />
                      <div className="text-sm text-muted-foreground">
                        预览效果（实际大小可能会根据使用场景调整）
                      </div>
                    </div>
                  </div>
                )}
              </div>
              
              <div className="p-4 bg-muted/30 rounded-lg">
                <h4 className="text-sm font-medium mb-2">图标使用说明</h4>
                <ul className="text-xs text-muted-foreground space-y-1">
                  <li>• 推荐使用PNG或SVG格式，尺寸64x64像素</li>
                  <li>• 图标主题影响在暗色/亮色模式下的显示</li>
                  <li>• 建议使用透明背景的图标以获得最佳效果</li>
                  <li>• 图标会在不同使用场景中自动调整大小</li>
                </ul>
              </div>
            </div>
          </div>

          {/* 分类和标签 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium">分类和标签</h3>
            
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>分类</Label>
                <div className="flex flex-wrap gap-2">
                  {categories.map((category) => (
                    <Badge
                      key={category}
                      variant={formData.categories.includes(category) ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => handleCategoryToggle(category)}
                    >
                      {category}
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="space-y-2">
                <Label>标签</Label>
                <div className="flex flex-wrap gap-2 mb-2">
                  {formData.tags.map((tag, index) => (
                    <Badge key={index} variant="secondary" className="flex items-center gap-1">
                      {tag}
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-auto p-0 w-4 h-4"
                        onClick={() => handleRemoveTag(index)}
                      >
                        <X className="w-3 h-3" />
                      </Button>
                    </Badge>
                  ))}
                </div>
                <div className="flex gap-2">
                  <Input
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    placeholder="输入标签"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        handleAddTag();
                      }
                    }}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={handleAddTag}
                    disabled={!newTag.trim()}
                  >
                    添加
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* 高级设置 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium">高级设置</h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="flex items-center justify-between p-4 border rounded-lg">
                <div className="space-y-1">
                  <Label>推荐工具</Label>
                  <p className="text-sm text-muted-foreground">
                    推荐的工具会在首页显示推荐标记
                  </p>
                </div>
                <Switch
                  checked={formData.featured}
                  onCheckedChange={(checked) => handleInputChange('featured', checked)}
                />
              </div>

              <div className="flex items-center justify-between p-4 border rounded-lg">
                <div className="space-y-1">
                  <Label>需要VPN</Label>
                  <p className="text-sm text-muted-foreground">
                    标记该工具是否需要VPN访问
                  </p>
                </div>
                <Switch
                  checked={formData.needs_vpn}
                  onCheckedChange={(checked) => handleInputChange('needs_vpn', checked)}
                />
              </div>
            </div>

            <div className="space-y-2 md:col-span-1">
              <Label>工具状态</Label>
              <Select
                value={formData.status}
                onValueChange={(value) => handleInputChange('status', value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择状态" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="active">正常</SelectItem>
                  <SelectItem value="inactive">停用</SelectItem>
                  <SelectItem value="maintenance">维护</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

        </form>
      </div>
    </div>
  );
}
